<template>
    <div class="login-container">
      <el-card class="login-card" shadow="hover">
        <div class="logo-section">
          <!-- 建议换成你自己的鞋城logo -->
          <img src="/src/photos/logo.jpg" alt="鞋城Logo" class="logo" />
          <h2 class="title">鞋城履行 · 注册</h2>
        </div>
  
        <el-form
          ref="registerFormRef"
          :model="user"
          :rules="rules"
          label-width="80px"
          class="register-form"
        >
          <el-form-item label="用户名" prop="uaccount">
            <el-input
              v-model="user.uaccount"
              placeholder="请输入用户名"
              :prefix-icon="User"
            />
          </el-form-item>
  
          <el-form-item label="邮箱" prop="uemail">
            <el-input
              v-model="user.uemail"
              placeholder="请输入邮箱"
              :prefix-icon="Message"
            />
          </el-form-item>
  
          <el-form-item label="电话" prop="utel">
            <el-input
              v-model="user.utel"
              placeholder="请输入电话号码"
              :prefix-icon="PhoneFilled "
            />
          </el-form-item>
  
          <el-form-item label="密码" prop="upwd">
            <el-input
              v-model="user.upwd"
              :type="pwdVisible ? 'text' : 'password'"
              placeholder="请输入密码"
              :prefix-icon="Lock"
            >
              <template #suffix>
                <el-icon @click="pwdVisible = !pwdVisible" class="eye-icon">
                  <component :is="pwdVisible ? View : Hide" />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
  
          <el-form-item label="确认密码" prop="confirmPwd">
            <el-input
              v-model="user.confirmPwd"
              :type="pwdVisible ? 'text' : 'password'"
              placeholder="请确认密码"
              :prefix-icon="Lock"
            >
              <template #suffix>
                <el-icon @click="pwdVisible = !pwdVisible" class="eye-icon">
                  <component :is="pwdVisible ? View : Hide" />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
  
          <div class="extra-options">
            <el-checkbox v-model="agreeTerms">我同意《用户协议》</el-checkbox>
          </div>
  
          <el-form-item class="buttons">
            <el-button type="primary" @click="handleRegister(registerFormRef)" class="register-btn">注册</el-button>
            <el-button @click="$router.push('/login')" class="login-btn">返回登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
  <script setup>
  import { ElMessage } from 'element-plus'
  import { ref, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { User, Lock, Message,View, Hide,PhoneFilled } from '@element-plus/icons-vue'
  import { register } from '@/api/User' 
  const router = useRouter()
  const registerFormRef = ref(null)
  
  const user = ref({
    uaccount: '',
    uemail: '',
    utel: '',
    upwd: '',
    confirmPwd: ''
  })
  const agreeTerms = ref(false)
  const pwdVisible = ref(false)
  
  // 校验规则
  const rules = {
    uaccount: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { pattern: /^[a-zA-Z_$]\w{2,11}$/, message: '用户名必须以字母/下划线开头，3-12位', trigger: 'blur' }
    ],
    uemail: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { pattern: /^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+\.[a-zA-Z0-9-.]+$/, message: '请输入有效的邮箱地址', trigger: 'blur' }
    ],
    utel: [
      { required: true, message: '请输入电话号码', trigger: 'blur' },
      { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }
    ],
    upwd: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, max: 16, message: '密码长度需为6-16位', trigger: 'blur' }
    ],
    confirmPwd: [
      { required: true, message: '请确认密码', trigger: 'blur' },
      { validator: (rule, value, callback) => {
          if (value !== user.value.upwd) {
            callback(new Error('两次密码输入不一致'))
          } else {
            callback()
          }
        }, trigger: 'blur'
      }
    ],
    agreeTerms: [
      { required: true, message: '请同意用户协议', trigger: 'change' }
    ]
  }
  
  // 注册功能
  function handleRegister(formEl) {
    console.log(user.value)
    if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      console.log(user.value)
      register(user.value).then(res => {
        console.log(user.value)
           // 1. 注册成功：显示“注册成功”提示框
          // Element UI（Vue 2）写法
          ElMessage .success('注册成功！即将跳转到登录页');
          // 或 Element Plus（Vue 3）写法
          // ElMessage.success('注册成功！即将跳转到登录页');

          // 2. 延迟跳转（可选，让用户看清提示后再跳转，体验更好）
          setTimeout(() => {
            router.push({ path: "/login" });
          }, 1500); // 1.5秒后跳转
        // 登录成功逻辑
        // 跳转
      })
    } else {
      console.log('error submit!', fields)
    }
  })
  }
  </script>
  
  <style scoped>
  /* 整体背景：鞋店氛围图 */
  .login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.5)),
      url('https://images.unsplash.com/photo-1587463260925-87d79811e8da?auto=format&fit=crop&w=1600&q=80');
    background-size: cover;
    background-position: center;
  }
  
  /* 卡片 */
  .login-card {
    width: 420px;
    padding: 35px 30px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
  }
  .login-card:hover {
    transform: translateY(-6px);
  }
  
  /* Logo部分 */
  .logo-section {
    text-align: center;
    margin-bottom: 20px;
  }
  .logo {
    width: 85px;
    height: 85px;
    margin-bottom: 12px;
  }
  .title {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-size: 26px;
    font-weight: bold;
    color: #4a3f35;
    letter-spacing: 1px;
  }
  
  /* 表单 */
  .register-form {
    margin-top: 15px;
  }
  .el-input {
    border-radius: 25px;
    background-color: #fffaf5;
    padding: 2px 10px;
    transition: 0.3s;
  }
  .el-input:hover {
    box-shadow: 0 0 6px rgba(139, 111, 75, 0.3);
  }
  .eye-icon {
    cursor: pointer;
    color: #8b6f4b;
    transition: 0.3s;
  }
  .eye-icon:hover {
    color: #4a3f35;
  }
  
  /* 额外选项 */
  .extra-options {
    display: flex;
    justify-content: flex-start;
    margin: 15px 0;
    font-size: 13px;
    color: #666;
  }
  
  /* 按钮 */
  .buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
  }
  .register-btn {
    width: 65%;
    border-radius: 25px;
    background: linear-gradient(135deg, #8b6f4b, #b9976b);
    border: none;
    font-weight: bold;
    font-size: 16px;
    transition: 0.3s;
  }
  .register-btn:hover {
    background: linear-gradient(135deg, #725838, #9e7b4e);
  }
  .login-btn {
    width: 30%;
    border-radius: 25px;
    border: 2px solid #8b6f4b;
    color: #8b6f4b;
    font-weight: bold;
    font-size: 14px;
    background: transparent;
    transition: 0.3s;
  }
  .login-btn:hover {
    background: #8b6f4b;
    color: white;
  }
  </style>
  